import gsap from 'gsap';
import { Draggable } from 'gsap/Draggable';
import React, { useEffect } from 'react'
const SilderImg = ({isShow}) => {
  useEffect(() => {
    const paths = [
      { path: [{ x: 100, y: 0 }, { x: 200, y: 100 }, { x: 300, y: 0 }, { x: 400, y: 100 }, { x: 500, y: 0 }], duration: 5 },
      { path: [{ x: 50, y: 50 }, { x: 150, y: 150 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 450, y: 50 }], duration: 7 },
      { path: [{ x: 0, y: 100 }, { x: 100, y: 200 }, { x: 200, y: 100 }, { x: 300, y: 200 }, { x: 400, y: 100 }], duration: 9 }
    ];

    const animations = paths.map((item, index) => {
      return gsap.to(`.path-image-${index + 1}`, {
        duration: item.duration,
        repeat: -1,
        yoyo: true,
        ease: "power1.inOut",
        motionPath: {
          path: item.path,
          curviness: 1.25,
          autoRotate: true
        }
      });
    });

    paths.forEach((item, index) => {
      Draggable.create(`.path-image-${index + 1}`, {
        bounds: "body",
        inertia: true
      })
    });
    
  }, [isShow])
  return (
    <div>
            <img  src='./path-image1.png' className='path-image-1 w-20 h-20 object-contain absolute' />
            <img src='./path-image2.png' className='path-image-2 w-20 h-20 object-contain absolute' />
            <img src='./path-image3.png' className='path-image-3 w-20 h-20 object-contain absolute' />
    </div>
  )
}

export default SilderImg
